<template>
  <div class="point row1col3" :style="styleColor">
    <span class="point-name"
      :style="pointName.styleObj"
    >{{ pointName.text }}</span>
    <span class="point-value"
      :style="valueObj.styleObj"
    >{{ pointValue }}</span>
    <span class="point-unit"
      :style="pointUnit.styleObj"
    >{{ pointUnit.text }}</span>
  </div>
</template>

<script>
  import { getDataByPointId } from '@/api/pointData'

  export default {
    name: "PointRow1Col3",
    components: {},
    props: {
      value: Object,
      ispreview: Boolean,
    },
    data() {
      return {
        options: {},
        pointValue: null,
      };
    },
    computed: {
      transStyle() {
        return this.objToOne(this.options);
      },
      pointName() {
        return {
          text: this.transStyle.name,
          styleObj: {
          },
        }
      },
      valueObj() {
        return {
          styleObj: {
            'border-left': `1px solid ${this.transStyle.borderColor}`,
            'border-right': `1px solid ${this.transStyle.borderColor}`,
            color: this.transStyle.color,
          },
        }
      },
      pointUnit() {
        return {
          text: this.transStyle.pointUnit,
          styleObj: {
          },
        }
      },
      styleColor() {
        console.log(this.transStyle)
        return {
          position: this.ispreview ? "absolute" : "static",
          'border': this.transStyle.showBorder ? `1px solid ${this.transStyle.borderColor}` : 'none',
          color: this.transStyle.color || "#fff",
          "font-weight": this.transStyle.fontWeight || "600",
          "font-size": this.transStyle.fontSize + "px" || "12px",
          background: this.transStyle.background,
          "text-align": this.transStyle.textAlign,
          display: this.transStyle.hideLayer == undefined ?
            "flex" :
            this.transStyle.hideLayer ?
            "none" :
            "flex",
          width: this.transStyle.width + "px",
          height: this.transStyle.height + "px",
          left: this.transStyle.left + "px",
          top: this.transStyle.top + "px",
          right: this.transStyle.right + "px",
        };
      },
    },
    watch: {
      value: {
        handler(val) {
          this.options = val;
          this.queryData()
        },
        deep: true,
      },
    },
    mounted() {
      this.options = this.value;
      console.log(this.options)
      this.parseData()
    },
    methods: {
      /*解析数据*/
      parseData() {
        this.queryData()
        if(this.options.data.dataType === "dynamicData" && this.ispreview) {
          setInterval(this.queryData, this.options.data.refreshTime)
        }
      },
      /*查询参数点的数据*/
      queryData() {
        if(this.options.data.stationPoint == null || this.options.data.stationPoint.pointId == null) {
          return; // 还未配置参数点
        }
        getDataByPointId(this.options.data.stationPoint.pointId).then(resp => {
          let pointCode = Object.keys(resp.data)[0]
          this.pointValue = resp.data[pointCode]
          if(this.options.data.pointRuleAI) {
            for (let i = 0; i < this.options.data.pointRuleAI.length; i++) {
              let rule = this.options.data.pointRuleAI[i]
              const result = eval(`${this.pointValue}${rule.operator}${rule.pointValue}`)
              if(result) {
                this.valueObj.styleObj = {
                  ...this.valueObj.styleObj,
                  color: rule.color
                }
                break;
              }
            }
          }
        })
      },
    },
  };
</script>

<style scoped lang="scss">
  .point.row1col3 {
    display: flex!important;
    height: 100%;
    align-items: center;
    color: #fff;
    .point-name {
      flex: 1;
    }
    .point-value {
      flex: 1.2;
    }
    .point-unit {
      width: 50px;
    }
  }
</style>
